<!--
 * @Author: songleiluo 361215740@qq.com
 * @Date: 2024-01-07 12:04:56
 * @LastEditors: songleiluo 361215740@qq.com
 * @LastEditTime: 2024-01-28 14:30:54
 * @FilePath: \dxhospital\src\pages\patient\patient.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm" :size="formSize"
        status-icon>
        <el-container class="patient-form-container">
            <el-form-item label="入院日期" prop="name" class="patient-form-container-item">
                <el-input v-model="ruleForm.name" />
            </el-form-item>
            <el-form-item label="主治医师" prop="sex" class="patient-form-container-item">
                <el-input v-model="ruleForm.sex" />
            </el-form-item>
        </el-container>
        <el-container class="patient-form-container">
            <el-form-item label="主要诊断" prop="name" class="patient-form-container-item-textarea">
                <el-input v-model="ruleForm.name" type="textarea" />
            </el-form-item>
        </el-container>
        <el-container class="patient-form-container">
            <el-form-item label="T" prop="name" class="patient-form-container-item">
                <div class="patient-form-container-item-content">
                    <el-input v-model="ruleForm.name" />
                    <span>℃</span>
                </div>
            </el-form-item>
            <el-form-item label="脉搏" prop="name" class="patient-form-container-item">
                <div class="patient-form-container-item-content">
                    <el-input v-model="ruleForm.name" />
                    <span>次/分</span>
                </div>
            </el-form-item>
            <el-form-item label="呼吸" prop="name" class="patient-form-container-item">
                <div class="patient-form-container-item-content">
                    <el-input v-model="ruleForm.name" />
                    <span>次/分</span>
                </div>
            </el-form-item>
            <el-form-item label="BP" prop="name" class="patient-form-container-item">
                <div class="patient-form-container-item-content">
                    <el-input v-model="ruleForm.name" />
                    <span>mmHg</span>
                </div>
            </el-form-item>
            <el-form-item label="身高" prop="name" class="patient-form-container-item">
                <div class="patient-form-container-item-content">
                    <el-input v-model="ruleForm.name" />
                    <span>cm</span>
                </div>
            </el-form-item>
            <el-form-item label="体重" prop="name" class="patient-form-container-item">
                <div class="patient-form-container-item-content">
                    <el-input v-model="ruleForm.name" />
                    <span>Kg</span>
                </div>
            </el-form-item>
            <el-form-item label="BMI" prop="name" class="patient-form-container-item">
                    <el-input v-model="ruleForm.name" />
            </el-form-item>
        </el-container>
    </el-form>
</template>

<script lang="ts" setup >
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'

interface RuleForm {
    name: string;
    age: number;
    sex: string;
    "nation": string;
    "profession": string;
    "education": string;
    "religion": string;
    "marriage": string;
    "defray": number;
    "income": number;
    "residence": string;
    "carer": string;
    "bornDate": string;
    "address": string;
    "identityCardNo": string;
    "tel": string;
    collectionTime?: string;
}


const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
    "name": "jemmy",
    "sex": "男",
    "age": 26,
    "nation": "汉",
    "profession": "自由职业",
    "education": "本科",
    "religion": "无",
    "marriage": "未婚",
    "defray": 5000,
    "income": 12000,
    "residence": "西安市",
    "carer": "王五",
    "bornDate": "1990-01-02",
    "address": "西安市",
    "identityCardNo": "6105281995010249852",
    "tel": "15678964396"
})
const rules = reactive<FormRules<RuleForm>>({
    name: [
        { required: true, message: 'Please input Activity name', trigger: 'blur' },
        { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    age: [{ required: true, message: 'Please input age', trigger: 'blur' },],
    sex: [{ required: true, message: 'Please input age', trigger: 'blur' },]
})



</script>

<style scoped lang='scss'>
.patient-form-container {
    width: 100%;
    display: flex;
    flex-direction: row;

    justify-content: flex-start;
    flex-wrap: wrap;
    align-content: flex-start;

    .patient-form-container-item {
        width: 25%;
        display: flex;
    align-items: center;
        .patient-form-container-item-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            ::v-deep .el-input{
                width: 83% !important;
            }
            span {
                display: inline-block;
               flex:1;
                text-align: right;
            }
        }
    }

    .patient-form-container-item-textarea {
        width: 50%;
    }
}
</style>